import eventBus from "@/eventBus";
import { debounce } from "@/utils";
import defaultGif from "@/assets/default.gif";
//疑问这里滚动了会什么会产生加载
let imgs = [];
//imgs 是一个数组，用于存储待
//处理的图片信息。每个图片信息包含 dom（图片 DOM 元素）和 src（图片实际的 URL）。
function setImage(img) {
  img.dom.src = defaultGif; // 先暂时使用着默认图片
  // 处理图片
  // 该图片是否在视口范围内
  //// 获取视口高度
  const clientHeight = document.documentElement.clientHeight;
  //// 获取图片的位置信息
  const rect = img.dom.getBoundingClientRect();
  const height = rect.height || 150;
  //不在视口范围给他默认求150高度
    // 判断该图片是否在视口范围内
  if (rect.top >= -height && rect.top <= clientHeight) {
    // 在视口范围内
    // const tempImg = new Image();
    // tempImg.onload = function() {
    //   // 当真实图片加载完成之后
    //   img.dom.src = img.src;
    // };
    // tempImg.src = img.src;
    img.dom.src = img.src;
    imgs = imgs.filter((i) => i !== img);
    // 从 imgs 中移除已加载的图片

  }
}

// 希望，调用该函数，就可以设置那些合适的图片
function setImages() {
  for (const img of imgs) {
    // 处理该图片
    setImage(img);
  }
}

function handleScroll() {
  setImages();
}

eventBus.$on("mainScroll", debounce(handleScroll, 50));
//这段代码主要实现了一个懒加载（Lazy Loa
//ding）图片的功能，并且使用了事件总线（EventBus）来处理滚动事件
//这里会监听mainscroll在哪个地方
//并使用 debounce 函数将 handleScroll 函数的调用频
//率限制为每 50 毫秒一次，从而减少滚动事件处理的次数，提高性能。
export default {
    // 当元素被插入到 DOM 中时调用
  inserted(el, bindings) { 
    const img = {
      dom: el,
      src: bindings.value,
    };
    imgs.push(img);
    // 立即处理它
    setImage(img);
  },
  unbind(el) {
    imgs = imgs.filter((img) => img.dom !== el);
  },//在指令解绑时调用。它从 imgs 数组中移除指定的图片对象。
};
//这个是懒加载需要传入你的图片url
